<!DOCTYPE html>
<html>
<head>
    <title>XHR FormData Example</title>
</head>
<body>
    <p>This example must be run on a server to work properly.</p>
    <script>document.writeln("<p>You browser " + (typeof FormData != "undefined" ? "does" : "doesn't") + " support the FormData type.");</p></script>
    <p>Fill in the form below:</p>
    <form id="user-info">
        <label for="user-name">Name:</label><input type="text" id="user-name" name="user-name" /><br />
        <label for="user-email">Email:</label><input type="text" id="user-email" name="user-email" /><br />
        <input type="button" value="Submit" onclick="submitData()" />
    </form>
    <script>
    
        function createXHR(){
            if (typeof XMLHttpRequest != "undefined"){
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined"){
                if (typeof arguments.callee.activeXString != "string"){
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                    "MSXML2.XMLHttp"],
                        i, len;
            
                    for (i=0,len=versions.length; i < len; i++){
                        try {
                            var xhr = new ActiveXObject(versions[i]);
                            arguments.callee.activeXString = versions[i];
                            return xhr;
                        } catch (ex){
                            //skip
                        }
                    }
                }
            
                return new ActiveXObject(arguments.callee.activeXString);
            } else {
                throw new Error("No XHR object available.");
            }
        }
        
        function submitData(){
            var xhr = createXHR();        
            xhr.onreadystatechange = function(event){
                if (xhr.readyState == 4){
                    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                        alert(xhr.responseText);
                    } else {
                        alert("Request was unsuccessful: " + xhr.status);
                    }
                }
            };
            
            xhr.open("post", "postexample.php", true);
            var form = document.getElementById("user-info");            
            xhr.send(new FormData(form));
        }

    </script>
</body>
</html>
